@extends('layouts.console_header')

@section('title', '修改启动页')

@section('resources')
    @parent
    <!-- css 文件 -->
<style>
    input[name="h5content"]{border: 1px solid #d6d7dc;height: 30px;width: 400px;margin-left: 20px;padding: 0 5px;}
    #h5_content{margin: 10px 0;display: none;}
    #shop_content{margin: 10px 130px;display: none;}
    #shop_content div input[name="shopname"]{border: 1px solid #000;height: 30px;width: 200px;padding: 0 5px;}
    #shop_content div #search_shop{border: 1px solid #d6d7dc;height: 35px;width: 100px;background-color: #9955c6;color: #fff;}
    #shop_content ul{border: 1px solid #d6d7dc;height: 80px;width: 800px;margin: 20px 0;padding: 5px;}
    #shop_content ul li{margin: 5px 10px;float: left;}
    .banner_picture .banner_pic{margin-top: 20px;position: relative;width: 200px;height: 100px;margin-left: 30px;}
    .banner_picture .pic_close{position: absolute;top: -10px;right: -10px;width: 20px;height: 20px;margin: 0;}
    .banner_time{margin: 10px 0;}
    .banner_time input{border: 1px solid #d6d7dc;margin: 0 10px;height: 28px;}
</style>
@endsection

@section('content')
<!--  html内容  -->
<section class="user_list">
    <div style="border-bottom: 2px solid #9955c6;overflow: hidden;">
        <p class="fz_14 account_title fl" style="border: none;">
            <span style="color: #7f7f7f;">
                <a href="/console/index">首页</a>>用户版运营><a href="/console/user/banner/appstart/list?type=appstart&cityid={{$cityid}}">启动页管理</a>>
            </span>
            <span class="co_violet">修改</span>
        </p>
        <a onclick="history.go(-1);" href="#"><p class="fr tc back_btn">返回</p></a>
    </div>
    <div class="banner_modify">
        <p class="fz_18 banner_banner">启动页</p>
        <form action="" method="" id="banner_content">
            <div class="banner_username">
                <p class="fl" style="width: 100px;text-align: right;margin: 0 30px 0 0;">
                    <span class="co_orange">*</span>
                    <span>名称</span>
                </p>
                <input type="text" name="name" value="{{$name}}">
                <input type="hidden" name="cityid" value="{{$cityid}}" />
                <input type="hidden" name="action" value="{{$action}}" />
                <input type="hidden" name="appstartid" value="{{$appstartid}}">
            </div>
            <div class="banner_picture">
                <div class="form-group jingyzz oh">
                    <label class="fl" style="width: 100px;text-align: right;">图片</label>
                    <div class="oh fl pic_box_outer" style="margin-left: 0px;">
                        <input style="left: 31px;height: 130px;" type="file"  id="banner" multiple="multiple"  style="width:250px;height: 130px;" onchange=javascript:setImagePreviews('bannerid','banner','banner',client,'banner','input[name="banner"]','.progress'); />
                        <span class="upload_pic fl">+上传图片</span>
                        <div class="fl pictureshow" id="bannerid"></div>
                    </div>
                </div>
                <div class="progress">  </div>
                <p class="banner_pic" style="margin-left: 130px;width: 108px;height: 162px;">
                    <img style="margin-left: 0;width: 108px;height: 162px;" src="{{env('IMAGE_DOMAIN')}}{{$picurl}}" alt="">
                    <img class="pic_close" src="{{env('IMAGE_DOMAIN')}}images/access_delete.png?v={{env('IMAGE_VERSION')}}" alt="">
                </p>
                <input type="hidden" name="banner" value="{{$picurl}}">
            </div>
            {{--<div class="banner_size" style="margin: 20px 0;">--}}
                {{--<p style="width: 100px;text-align: right;margin-right: 30px;">发布类型</p>--}}
                {{--<select name="isglobal">--}}
                {{--@if($roleid == 4 || $roleid == 12 || $roleid == 11 || $roleid==13)--}}
                    {{--<option value="0" selected="selected">当地</option>--}}
                {{--@else--}}
                    {{--@if($isglobal == '1')--}}
                        {{--<option value="1" selected="selected">全国</option>--}}
                        {{--<option value="0">当地</option>--}}
                    {{--@else--}}
                        {{--<option value="1">全国</option>--}}
                        {{--<option value="0" selected="selected">当地</option>--}}
                    {{--@endif--}}
                {{--@endif--}}
                {{--</select>--}}
            {{--</div>--}}
            <div class="banner_order" style="height: 40px;line-height: 40px;">
                <p class="fl" style="width: 100px;text-align: right;margin-right: 10px;">跳转链接</p>
                @if($type == 'h5')
                    <input type="radio" name="type" value="h5" checked>H5页面
                    <input type="radio" name="type" value="shop">商家详情
                    <input type="radio" name="type" value="blank">空白页面
                @elseif($type == 'shop')
                    <input type="radio" name="type" value="h5">H5页面
                    <input type="radio" name="type" value="shop" checked>商家详情
                    <input type="radio" name="type" value="blank">空白页面
                @elseif($type == 'blank')
                    <input type="radio" name="type" value="h5">H5页面
                    <input type="radio" name="type" value="shop">商家详情
                    <input type="radio" name="type" value="blank" checked>空白页面
                @else
                    <input type="radio" name="type" value="h5">H5页面
                    <input type="radio" name="type" value="shop">商家详情
                    <input type="radio" name="type" value="blank">空白页面
                @endif
            </div>
            <div id="h5_content">
                <p class="fl" style="width: 100px;text-align: right;margin-right: 10px;">url:</p>
                <input type="text" name="h5content" value="{{$content}}">
            </div>
            <div id="shop_content">
                <div>
                    <input type="text" name="shopname" value="" />
                    <input type="button" value="查询" id="search_shop">
                </div>
                <ul id="search_result" class="oh">
                    <li><input type="radio" name="shopid" value="{{$shopid}}" checked><span>{{$shopname}}</span></li>
                </ul>
            </div>
            <div class="banner_time">
                <p class="fl" style="width: 100px;text-align: right;margin-right: 10px;">生效时间</p>
                <input type="date" name="starttime" value="{{$starttime}}" min='{{date('Y-m-d')}}' onchange="followval()">至
                <input type="date" name="lasttime" value="{{$lasttime}}" min='{{date('Y-m-d')}}'>
            </div>
            <div style="width: 1160px;margin: 20px 10px;" class="oh">
                <input class="sure fl" type="button" id="submit_banner" style="background-color: #9955c6;" value="保存"/>
                <input class="cancel fr" type="button" value="取消" onclick="javascript:history.back(-1);" />
            </div>
        </form>
    </div>
</section>
@endsection

@section('scriptResources')
    @parent
    <script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>
    <script>
       'use strict';
        var adminUserId = '{{$adminUserId}}';
        var roleid='{{$roleid}}';
        var cityid='{{$cityid}}';
        var OSS = OSS.Wrapper;
        var STS = OSS.STS;
        var client = new OSS({
            region: 'oss-cn-beijing',
            accessKeyId: '{{$AccessKeyId}}',
            accessKeySecret: '{{$AccessKeySecret}}',
            stsToken: '{{$SecurityToken}}',
            bucket: 'fbw',
            secure: true
        });
        var type = "{{$type}}";
        function followval(){
            $('input[name="lasttime"]').val($('input[name="starttime"]').val())
        }
        if (type == "h5") {
            $("#h5_content").show();
            $("#shop_content").hide();
        }
        if (type == "shop") {
            $("#h5_content").hide();
            $("#shop_content").show();
        }
        if (type == "url") {
            $("#h5_content").hide();
            $("#shop_content").hide();
        }
        $("input[name = 'type']").click(function () {
            if ($(this).val() == 'h5'){
                $("#h5_content").show();
                $("#shop_content").hide();
            }else if($(this).val() == 'shop'){
                $("#h5_content").hide();
                $("#shop_content").show();
            }else{
                $("#h5_content").hide();
                $("#shop_content").hide();
            }
        })
        //上传图片
        var applyTokenDo = function (func) {
           return func(client);
        };
        var progress = function (p) {
            return function (done) {
                var bar = document.getElementById('progress-bar');
                bar.style.width = Math.floor(p * 600) + 'px';
                bar.innerHTML = Math.floor(p * 100) + '%';
                done();
                console.log(p);
                if(p==1){
                    $('#progress-bar').remove();
                    bar.style.width = 0+'px';
                    bar.innerHTML = 0 + '%';
                }
            }
        };
        var prog=$('<div id="progress-bar"class="progress-bar"role="progressbar"aria-valuenow="0"aria-valuemin="0"aria-valuemax="100" style="min-width: 1px;width: 0px;background: #9955c6;border-radius: 10px;margin: 10px 100px;padding-left: 10px;">0%</div>');
        // 图片显示
        function setImagePreviews(avalue,inputid,picshow,client,id,ipt,pro) {
            $(pro).prepend(prog);
            var docObj = document.getElementById(inputid);
            var dd = document.getElementById(avalue);
            dd.innerHTML = "";
            var fileList = docObj.files;
            for (var i = 0; i < fileList.length; i++) {
                dd.innerHTML += "<div style='float:left' > <img id='"+ picshow + i + "'  /> </div>";
                var imgObjPreview = document.getElementById(picshow+i); 
                if (docObj.files && docObj.files[i]) {
                    //火狐下，直接设img属性
                    imgObjPreview.style.display = 'block';
                    imgObjPreview.style.width = '150px';
                    imgObjPreview.style.height = '180px';
                    //imgObjPreview.src = docObj.files[0].getAsDataURL();
                    //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                    imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
                }
                else {
                    //IE下，使用滤镜
                    docObj.select();
                    var imgSrc = document.selection.createRange().text;
                    alert(imgSrc)
                    var localImagId = document.getElementById(picshow + i);
                    //必须设置初始大小
                    localImagId.style.width = "150px";
                    localImagId.style.height = "180px";
                    //图片异常的捕捉，防止用户修改后缀来伪造图片
                    try {
                        localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                        localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                    }
                    catch (e) {

                        alert("您上传的图片格式不正确，请重新选择!");
                        return false;
                    }
                    imgObjPreview.style.display = 'none';
                    document.selection.empty();
                }
            }
            var applyTokenDo1 = function (func) {
               return func(client,id,ipt);
            };
            applyTokenDo1(uploadLogo);
            return true;
        }
        //上传图片
        var uploadLogo = function (client,id,ipt) {
            var timestamp = new Date().getTime();
            var filePath= "temp/photos_" + adminUserId + "_" + timestamp; //文件路径：用户id＋时间戳
            var file = document.getElementById(id).files[0];
            var key = filePath;
            console.log('key:'+ key);
            client.multipartUpload(key, file, {
                progress: progress
            }).then(function (res) {
                // console.log('upload success: %j', res);
                // $('#progress-bar').remove();
                $(ipt).val(key);
                // $().img('').attr('src', 'http://file.fbw-china.com/'+filePath);
            });
        };
        $("#search_shop").click(function() {
            var shopname = $("input[name='shopname']").val();
            if(shopname == '') {
                alert('请输入搜索内容');return;
            }
            $.ajax({
                url : "/console/shop/searchbyname",
                type : "get",
                data : {shopname:shopname},
                dataType: "json",
                success:function (data){
                    if(data.status == 'success') {
                        var data=data.data;
                        var str = '';
                        for(var i=0; i<data.length;i++) {
                            var list=data[i];
                            str += '<li><input type="radio" name="shopid" value="'+list.id+'"><span>'+list.name+'</span></li>';
                        }
                    } else {
                        var str='无商家';
                    }
                    $("#search_result").html(str);
                }
            })
        });

        $("#submit_banner").click(function() {
            $.ajax({
                url : "/console/user/banner/appstart/edit",
                type : "post",
                data : $('#banner_content').serialize(),
                dataType: "json",
                success:function (data){
                    if(data.status == 'success') {
                        alert(data.message);
                        window.location.href="/console/user/banner/appstart/list?type=app_start&cityid=" + cityid;
                    } else {
                        alert(data.message);
                    }
                }
            })
        });
        $('.pic_close').click(function(){
            $("input[name='banner']").val("");
            $(this).parent().hide();
        })
    </script>
@endsection